<template>
  <div class="execution">
    <basic-container>
      <el-form v-model="labelPosition" label-width="120px" :model="contentDetails">
        <el-form-item label="所属栏目" v-if="type == 'details'">
          <span>{{ contentDetails.columnName }}</span>
        </el-form-item>
        <el-form-item label="内容类别">
          <span>{{ contentDetails.type | Type }}</span>
        </el-form-item>
        <el-form-item label="封面">
          <img :src="contentDetails.cover" style="width: 50px;height: 50px;"/>
        </el-form-item>
        <el-form-item label="内容">
          <img :src="contentDetails.cover" style="width: 50px;height: 50px;"/>
        </el-form-item>
        <el-form-item label="标题">
          <span>{{ contentDetails.title }}</span>
        </el-form-item>
        <el-form-item label="正文">
          <span>{{ contentDetails.text}}</span>
        </el-form-item>

        <el-form-item label="选择栏目" v-if="type != 'details'">
          <el-select v-model="params.columnId" clearable placeholder="请选择">
            <el-option
              v-for="item in columnOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="选择店铺" v-if="type != 'details'">
          <el-select v-model="params.storeId" clearable placeholder="请选择">
            <el-option
              v-for="item in storeOptions"
              :key="item.storeId"
              :label="item.storeName"
              :value="item.storeId">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="绑定商品">
          <el-button v-if="type != 'details'" type="primary" round @click="selechProudt()" size="small" icon="el-icon-plus">选择商品</el-button>
          <div class="table-container">
            <el-table :data="contentDetails.contentProParams" :header-cell-style="{ color: '#4D4D4D', background: '#F1F2F7' }">
              <el-table-column label="商品图片" align="center">
                <template slot-scope="scope">
                  <img :src="scope.row.pic" style="width: 50px; height: 50px"/>
                </template>
              </el-table-column>
              <el-table-column
                label="商品名称"
                prop="title"
                align="center"
              ></el-table-column>
              <el-table-column
                label="商品价格"
                prop="price"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button v-if="type == 'examine'" type="primary" size="small" round  @click="handleExamine()">审核</el-button>
          <el-button v-if="type == 'resend'" type="warning" size="small" round @click="handleResend()">重发</el-button>
        </el-form-item>
      </el-form>




      <el-dialog title="选择商品" :visible.sync="dialogVisible" width="60%">
        <div class="table-container">
          <el-table
            :data="dialogVList"
            :header-cell-style="{ color: '#4D4D4D', background: '#F1F2F7' }"
            @selection-change="handleSelectionChange"
          >
            <el-table-column
              type="selection"
              width="50"
              align="center"
              reserve-selection
            ></el-table-column>
            <el-table-column label="商品缩略图">
              <template slot-scope="scope">
                <div style="display: flex; align-items: center">
                  <img
                    :src="scope.row.productPic"
                    style="width: 50px; height: 50px; margin-right: 10px"
                  />
                  <span>{{ scope.row.productName }}</span>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="规格"
              prop="sku"
              align="center"
            ></el-table-column>
            <el-table-column
              label="价格"
              prop="price"
              align="center"
            ></el-table-column>
          </el-table>
        </div>
        <div
          style="
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
          "
        >
          <div>
            <el-button type="primary" plain @click="dialogProudt()"
              >确 定</el-button
            >
            <el-button @click="dialogVisible = false">取 消</el-button>
          </div>
          <el-pagination
            style="float: right"
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            layout="total, sizes,prev, pager, next,jumper"
            :page-size="listQuery.size"
            :page-sizes="[5, 10, 15]"
            :current-page.sync="listQuery.current"
            :total="total"
          ></el-pagination>
        </div>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import {
  contentDetails,
  columnList,
  examineContent,
  repeatContent
} from "@/api/found/index";
import { getStore } from "@/api/rms/rmsstore";
import { accordStoreIdQuery } from "@/api/marke/index";
export default {
  props: {
    type: {
      type: String,
    },
  },
  data() {
    return {
      labelPosition: "right",
      contentDetails: {},
      columnOptions: [],
      storeOptions: [],
      dialogVisible: false,
      listQuery: {
        size: 10,
        current: 1,
        storeId: null,
      },
      total: 0,
      dialogVList: [],
      params: {
        columnId: null,
        storeId: null,
        productIds: [],
      },

    };
  },
  filters: {
    Type(val) {
      if (val === 1) {
        return "视频";
      } else if (val === 2) {
        return "图片";
      }
    },
  },
  created() {
    this.getDetails()
    if(this.type !== "details") {
      this.getStoreList()
      this.getColumnList()
    }
  },
  methods: {
    getDetails() {
      contentDetails({ contentId:this.$route.query.id}).then(res => {
        this.contentDetails = res.data.data
      })
    },
    getStoreList() {
      getStore().then((res) => {
        this.storeOptions = res.data.data;
      });
    },
    getColumnList() {
      columnList().then((res) => {
        this.columnOptions = res.data.data;
      });
    },
    selechProudt() {
      if (this.params.storeId) {
        this.dialogVisible = true;
        this.getStoreProdute();
      } else {
        this.$message({
          message: "请先选择店铺~",
          type: "warning",
          duration: 1000,
        });
        return;
      }
    },
    getStoreProdute(){
      this.listQuery.storeId = this.params.storeId;
      accordStoreIdQuery(this.listQuery).then((res) => {
        this.dialogVList = res.data.data.records;
        this.total = res.data.data.total;
      });
    },
    handleSizeChange(val) {
      this.listQuery.size = val;
      this.getStoreProdute();
    },
    handleCurrentChange(val) {
      this.listQuery.current = val;
      this.getStoreProdute();
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    dialogProudt() {
      if (!this.multipleSelection || this.multipleSelection.length < 1) {
        this.$message({
          message: "请选择要操作的商品",
          type: "warning",
          duration: 1000,
        });
        return;
      }

      let arr = [];
      for (let i = 0; i < this.multipleSelection.length; i++) {
        arr.push({
          productId: this.multipleSelection[i].productId,
          pic: this.multipleSelection[i].productPic,
          title: this.multipleSelection[i].productName,
          price: this.multipleSelection[i].price
        });
      }

      this.contentDetails.contentProParams = arr
      this.dialogVisible = false;
    },
    handleExamine() {

      if (!this.params.columnId) {
        this.$message({
          message: "请选择栏目~",
          type: "warning",
          duration: 1000,
        });
        return;
      }

      let arr = [];
      for (let i = 0; i < this.contentDetails.contentProParams.length; i++) {
        arr.push(this.contentDetails.contentProParams[i].productId);
      }
      this.params.productIds = arr;
      this.params.contentId = this.$route.query.id;

      examineContent(this.params).then(res => {
        if (res.data.code == 200) {
          this.$message({
            message: res.data.msg,
            type: "success",
            duration: 1000,
          });
          this.$router.go(-1);
        } else {
          this.$message({
            message: res.data.msg,
            type: "warning",
            duration: 1000,
          });
        }
      })
    },
    handleResend() {
      const that = this;
      if (!that.params.columnId) {
        that.$message({
          message: "请选择栏目~",
          type: "warning",
          duration: 1000,
        });
        return;
      }
      that.$confirm("你确定要重发？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(function () {
        let arr = [];
        for (let i = 0; i < that.contentDetails.contentProParams.length; i++) {
          arr.push(that.contentDetails.contentProParams[i].productId);
        }
        that.params.productIds = arr;
        that.params.contentId = that.$route.query.id;
        repeatContent(that.params).then(res => {
          if (res.data.code == 200) {
            that.$message({
              message: res.data.msg,
              type: "success",
              duration: 1000,
            });
            that.$router.go(-1);
          } else {
            that.$message({
              message: res.data.msg,
              type: "warning",
              duration: 1000,
            });
          }
        })
      })
    }
  }
}

</script>
